
import React,{useState,useEffect} from 'react'  
import {View,Text,TouchableOpacity,StyleSheet,ImageBackground,FlatList,TextInput,SectionList,Button,TouchableHighlight} from 'react-native';
import '../../global'

const College = ({navigation}) => {
    const [univer,setUniver] = useState(0);
    const [DATA,setData] = useState([{}]);
    const [color,setColor] = useState(['rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
    useEffect(()=>{
        fetch('https://wx.qasdwer.top:8080/school/name')
      .then(res=>res.json())
      .then(res=>{ 
        setData(res);
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });
    },[])
    const RenderItem = ({ item,index}) => {
        return (
        <TouchableHighlight onPress={()=>{
            setUniver(index);
            let arr = ['rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)']
            arr[index] = 'white';
            setColor(arr);
        }} 
        style={{width:changeW(150),height:changeH(80),backgroundColor:color[index],marginBottom:changeH(0),display:'flex',justifyContent:'center',alignItems:'center',borderColor:'rgb(234,234,234)',borderWidth:0.3}}
        underlayColor='white'
        >
            <Text style={{fontSize:changeW(27),color:'grey'}} >{item.city}</Text>
        </TouchableHighlight>
        )
    }
    
    const Card = ()=>{
            return (
                <View style={{backgroundColor:'white',height:h,padding:changeW(15),width:changeW(600)}}>
                    <FlatList 
                        data={DATA[univer].school}
                        numColumns={2}
                        renderItem={({item})=>{return (
                            <TouchableOpacity onPress={()=>navigation.navigate('Schooldetail',{school:item.school_name})} style={{width:'45%',height:changeH(65),marginBottom:changeH(20),marginRight:changeW(40),borderRadius:50,display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'rgb(255,250,250)',borderWidth:changeW(3),borderColor:'#CDC5BF'}}>
                        <Text  style={{fontSize:changeW(23),color:'#696969'}}>{item.school_name}</Text>
                            </TouchableOpacity>
                        )}}
                    />
                </View>
            ) 
    }

    return (
        <View style={{width:'100%'}}>
            <View style={{width:'100%',display:'flex',flexDirection:'row'}}>
                <FlatList 
                    data={DATA}
                    style={{backgroundColor:'white'}}
                    contentContainerStyle={{width:changeW(160)}}
                    renderItem={({item,index})=>{return <RenderItem item={item} index={index}/> }}
                />
                <Card />
            </View>
        </View>
    )
}

export default College
